<template>
	<view v-if="statistics">
		<view class="head">
			<view class="user u-flex">
				<image class="avatar"
					:src="statistics.user.avatar"></image>
				<view class="con u-flex-1">
					<view class="u-flex">
						<view class="nickname">{{ statistics.user.nickname }}</view>
						<view class="level-tag">
							{{statistics.agent.level.name}}
						</view>
					</view>
					<view class="u-m-t-16">
						{{statistics.agent.apply_info.school}}
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="section u-flex u-row-between">
				<view class="u-flex-1">
					<view>联系电话：{{statistics.agent.apply_info.mobile}}</view>
					<view class="u-m-t-20"> 注册时间：{{statistics.agent.createtime_text}}
					</view>
				</view>
				<view class="btn" style="align-self: self-start;"
				@click="callPhone(statistics.agent.apply_info.mobile)">拨打电话</view>
			</view>
			<view class="section u-m-t-30">
				<view class="tit">团队收益</view>
				<view class="u-flex u-m-t-40 text-center">
					<view class="u-flex-1 solid-right">
						<view>今日</view>
						<view class="num">
							<text>¥</text>{{statistics.today_order_money}}
						</view>
					</view>
					<view class="u-flex-1 solid-right">
						<view>昨日</view>
						<view class="num">
							<text>¥</text>{{statistics.yesterday_order_money}}
						</view>
					</view>
					<view class="u-flex-1 solid-right">
						<view>本周</view>
						<view class="num">
							<text>¥</text>{{statistics.week_order_money}}
						</view>
					</view>
					<view class="u-flex-1">
						<view>本月</view>
						<view class="num">
							<text>¥</text>{{statistics.month_order_money}}
						</view>
					</view>
				</view>
			</view>
			<view class="section u-m-t-30">
				<view class="tit">新增订单</view>
				<view class="u-flex u-m-t-40 text-center">
					<view class="u-flex-1 solid-right">
						<view>今日</view>
						<view class="num">
							{{statistics.today_order_count}}
						</view>
					</view>
					<view class="u-flex-1 solid-right">
						<view>昨日</view>
						<view class="num">
							{{statistics.yesterday_order_count}}
						</view>
					</view>
					<view class="u-flex-1 solid-right">
						<view>本周</view>
						<view class="num">
							{{statistics.week_order_count}}
						</view>
					</view>
					<view class="u-flex-1">
						<view>本月</view>
						<view class="num">
							{{statistics.month_order_count}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				statistics: '',
				user_id: '',
			}
		},
		onLoad(option) {
			if (option.user_id) {
				this.user_id = option.user_id
			}
			this.getStatistics()
		},
		methods: {
			callPhone(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			getStatistics() {
				let that = this
				this.$http('commission.statistics', {
					agentId: this.user_id,
					cat: 1
				}).then(res => {
					that.statistics = res.data
				})
			},
		}
	}
</script>
<style lang="scss"
	scoped>
	.main {
		margin-top: -170rpx;
		padding: 30rpx;

		.section {
			background: #fff;
			padding: 40rpx 30rpx;
			border-radius: 20rpx;
			.tit {
				font-size: 32rpx;
				font-weight: 900;
			}
			.num{
				margin-top: 30rpx;
				color: #e4380f;
				font-size: 36rpx;
				font-weight: 900;
				text{
					font-size: 60%;
					margin-right: 4rpx;
				}
			}
			.btn {
				line-height: 60rpx;
				background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				border-radius: 30rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #fff;
				padding: 0 20rpx;
			}
		}
	}

	.head {
		padding: 40rpx 40rpx 180rpx;
		background: linear-gradient(to bottom, #e98a31, #f7f7f7);

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.con {
			padding-left: 30rpx;
			color: #fff;

			.nickname {
				font-size: 36rpx;
			}

			.level-tag {
				margin-left: 18rpx;
				background: #f1c67e;
				display: inline-block;
				color: #4e2804;
				padding: 4rpx 20rpx;
				border-radius: 10rpx;
				font-size: 30rpx;
				transform: scale(.8);
				transform-origin: left center;
			}
		}
	}
</style>